<!doctype html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <base href="..">
  <title>Eloquent JavaScript :: Code Sandbox</title>

  <script src="js/acorn_codemirror.js"></script>
  <link rel=stylesheet href="js/node_modules/codemirror/lib/codemirror.css">
  <link rel=stylesheet href="css/ejs.css">
  <script src="js/sandbox.js"></script>
  <script src="js/chapter_info.js"></script>
  <script src="js/code.js"></script>

  <style>
    .control { font-size: 15px }
  </style>
</head>

<div style="background: #ffb; border-bottom: 1px solid silver; padding: 6px 4em; text-align: center">
  <strong>Note:</strong> If you are reading the <strong>second edition</strong> of the book,
  you'll want to go
  to <a href="https://eloquentjavascript.net/2nd_edition/code/">that
  edition's sandbox</a> instead!
</div>

<article style="max-width: 50em;">
  <h1>Code Sandbox<div style="font-size: 70%"><a class="subtlelink" href="../index.html">Eloquent JavaScript</a></div></h2>

  <p>You can use this page to download source code and solutions to
  exercises for the book Eloquent JavaScript, and to directly run code
  in the context of chapters from that book, either to solve exercises
  to simply play around.</p>

  <p>
    Chapter: <select id="chapters" class=control></select>
    <select id="per_chapter" class=control></select>
    <button id="run" class=control>run code</button>
  </p>

  <div class="editor-wrap">
    <textarea id="editor"></textarea>
    <div class="sandbox-output" id="output"></div>
  </div>

  <div id="runLocally">
    To run this chapter's code locally, use these files:
    <ul id="local-files" style="font-family: 'PT Mono', monospace; margin-top: 0"></ul>
  </div>

  <div id="fileInfo">
    These files contain this chapter’s project code:
    <ul id="files" style="font-family: 'PT Mono', monospace; margin-top: 0"></ul>
  </div>

  <p id="exercise_info">If you've solved the exercise and want to compare your code with
  mine, or you <em>really</em> tried, but can't get your code to work,
  you can <button id="solution" style="color: #c22;" class=control>look at the
  solution</button> (or <a id="download">download it</a>).</p>

  <p id="box_info">
    The base environment for this chapter (if any) is available in the
    sandbox above, allowing you to run the chapter's examples by
    simply pasting them into the editor.
  </p>
</article>
